<template>
	<view class="e-gap" :style="[gapStyle]"></view>
</template>

<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	import mpMixin from "../../libs/mixin/mpMixin";
	/**
	 * gap 间隔槽
	 * @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
	 * @tutorial https://www.uviewui.com/components/gap.html
	 * @property {String}			bgColor			背景颜色 （默认 'transparent' ）
	 * @property {String | Number}	height			分割槽高度，单位px （默认 20 ）
	 * @property {String | Number}	marginTop		与前一个组件的距离，单位px（ 默认 0 ）
	 * @property {String | Number}	marginBottom	与后一个组件的距离，单位px （默认 0 ）
	 * @property {Object}			customStyle		定义需要用到的外部样式
	 * 
	 * @example <e-gap height="80" bg-color="#bbb"></e-gap>
	 */
	export default defineComponent({
		name: "e-gap",
		mixins: [mpMixin]
	});
</script>

<script lang="ts" setup>
	import {
		computed,
		toRefs
	} from 'vue'
	import {
		gapProps,
	} from './props';
	import {
		addUnit,
		addStyle
	} from "../../libs/utils/_utils"
	import {
		useDefaultProps
	} from '../../libs/hooks'
	import {
		deepMerge
	} from "../../libs/utils"
	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";
	const {
		gap: gapDefaultProps
	} = toRefs(componentsProps);


	const _props = defineProps(gapProps)

	const props = useDefaultProps<DefaultProps['gap']>(_props, gapDefaultProps);
	const gapStyle = computed(() => {
		const style = {
			backgroundColor: props.value.bgColor,
			height: addUnit(props.value.height as string),
			marginTop: addUnit(props.value.marginTop as string),
			marginBottom: addUnit(props.value.marginBottom as string),
		}
		return deepMerge(style, addStyle(props.value.customStyle as Record<string, any>) as Record<string, any>)

	})
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/gap.scss";
</style>